<template>
  <div class="Header">
    <div class="quit" v-show="showStatus">
      <router-link tag="div" to="/" class="iconfont headerB">
      &#xe624;
      </router-link>
    </div>
    <div class="header" :style="opacityS" v-show="(!showStatus)">
      详情页面
      <router-link tag="div" to="/" class="iconfont headerB">
      &#xe624;
      </router-link>
    </div>
  </div>
</template>
<script>
export default{
  name: 'bannerHeader',
  data () {
    return {
      showStatus: true,
      opacityS: {
        opacity: 0
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      let top = document.documentElement.scrollTop
      if (top > 10) {
        this.showStatus = false
        let opc = top / 140
        this.opacityS.opacity = top > 140 ? 1 : opc
      } else {
        this.showStatus = true
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.quit
  position absolute
  top 0
  left 0
  right 0
  overflow hidden
  width .86rem
  height .86rem
  line-height .86rem
  border-radius .4rem
  text-align center
  color #fff
  background rgba(0,0,0,0.7)
  font-size .32rem
.header
  position fixed
  top 0
  left 0
  right 0
  overflow hidden
  height .86rem
  line-height .86rem
  text-align center
  color #fff
  background #00bcd4
  font-size .32rem
  .headerB
    position absolute
    top 0
    left 0
    width .64rem
    text-align center
    font-size .4rem
    color #fff
</style>
